<!DOCTYPE html>
<html class="ui-mobile">
<head>
<base href=".">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>登录</title>
<link rel="stylesheet" href="../tool/jquery-mobile/jquery.mobile-1.4.2.min.css">
<script src="../tool/jquery/jquery-1.11.2.min.js"></script>
<script src="../tool/jquery-mobile/jquery.mobile-1.4.2.min.js"></script>
<script src="../js/common.js"></script>

<style>
*{ text-shadow: none; }
 
h1{ text-align: center; }
.getmsg{
	margin-top:-18px;
	height:45px;
	background:#D4D4D4 ;
	padding:1px;
}

p span{
	margin-left:40px;
}
h4{
	margin-left: 20px;
}
.bottom{
	width:25%;
	height:15px;
	padding:13px 0 15px 0;
	float:left;
	color:#8B8B8B;
	text-align: center;
 	background:#cccccc;!important
}
.bottom:hover{
	background:#E97500  ;
	color:#ffffff;
}
.div_sginIn{
	margin-top: 10px;
	text-align: center;
	margin-bottom: 100px;
}

.span_sgin{
	display: block;
	width: 80%;
	border-radius: 4px;
	color: #ffffff;
	background: #ee721a;
	padding: 15px;
	margin: 0px auto;
}

.div_phone {
	display: block;
	margin:0px auto;
	width:85%;
	height:40px;
}

.div_vcode{
	display: block;
	margin:0px auto;
	width:85%;
	height:40px;
}

.span_vcode{
	float:right;
	width:120px;
	height:36px;
	padding-top:14px;
	text-align:center;
	border-radius: 4px;
	color: #ffffff;
	background: #ee721a;
}

.cancel{
	margin-left: 50px;
	border: none;
	background: #e97500;
	color: #ffffff;	
	border-radius: 4px;	
}
#msg{
	font-size: 30px;
}
#phone{
	display: block;
	width:96%;
	height:40px;
	border-radius: 4px;
	border:none;
	box-shadow: none;
}

#vcode{
	float: left;
	display: block;
	margin-right:20px;
	width:40%;
	height:40px;
	border-radius: 4px;
	border:none;
	box-shadow: none;
}
#code{
	display: block;
	margin:10px auto 0 auto;
	width:86%;
	height:40px;
	border-radius: 4px;
	border:none;
	box-shadow: none;
}
.tip{
	display:inline-block;
	color:#e97500;
	margin:0 0 30px 25px;
	/*line-height:0;*/	
}
.overlay {
	display:none;
    position: fixed;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000000;
    opacity:0.7;
    z-index:10;
}

.delay{
	width:50%;
	height:25%;
	background:#ffffff;
	position:fixed;
	top:25%;
	left:25%;
	z-index: 1000;
	display: none;
	border-radius: 10px;
	text-align: center;
}
.delay p{
	margin-top: 50px;
}

.img {
	position:absolute;
	width:30px;
	height:30px;	
	top:0;
}

.img1 { left:0%; }
.img2 { left:23%;}
.img3 { left:46%;}
.img4 { left:69%; }
.img5 { left:92%;}

.span {
	position:absolute;
	top:200%;
	color:#00a2df;
}

.span1{ left:-2%; }
.span2{ left:23%; }
.span3{ left:44%; }
.span4{ left:69%; }
.span5{ left:90%; }

#imgdiv{
	width:95%;
	margin:0 auto;
	position:relative;
	/*margin-top: 10%;*/
	height:15px;
	border-bottom: 1px solid #c0c0c0;
	overflow: visible;
}

.div_progress{
	padding:1px;
	background:#ffffff;
	width:90%;
	height:150px;
	margin:0 auto;
}
.span_progress{
	display:block;
	margin:20px auto;
	width:92%;
	color:#a9a9a9;
}
.span_color{ color:#00a2df; }

.p_title { font-size: 30px;color:#808080;margin-left: 20px; }
.p_realName {font-size: 24px;margin-left:20px;line-height: 0px; }
.p_phone { font-size: 24px;margin-left:20px; }

.div_page { min-height: 571px; background: rgb(238, 238, 238); }

.div_signOut
 {
	position: absolute;
  	right: 10px;
  	top: 112px;
  	width: 80px;
  	height: 30px;
  	padding-top:8px;
 	border-radius: 4px;
  	border: none;
  	text-align: center;
  	font-size: 24px;
}
</style>
</head>
<body class="ui-mobile-viewport ui-overlay-a">
<div data-role="page" id="sginpage" data-url="sginpage" tabindex="0" class="ui-page ui-page-theme-a ui-page-active div_page">	
	<p class="p_title">手机号登录</p>
	<p class="p_realName"></p>
	<p class="p_phone"></p>
	<div class="div_signOut" style="display:none"><a href="#" id="signout">退出</a></div>
	<div class="div_phone"> 
		<input id="phone" data-role="none" type="tel" style="appearance:none" placeholder="请输入您的手机号"><br>		
	</div>
	<div class="div_vcode" >
		<div style="margin-top:20px;">
		<input id="vcode" data-role="none" type="text" placeholder="请输入验证码">
		<span class="span_vcode">获取验证码</span>
		</div>
	</div>
	<div class="div_sginIn" style="margin-top:40px;"><span class="span_sgin">登陆</span></div>
	<div class="delay"><p>正在签到请稍等...</p></div>
	<div class="overlay"></div>
	<input type="hidden" id="userId">	
</div>

<script type="text/javascript">
$(document).ready(function() {
	
	 $.ajax({
		 url: common.ctx + '/sign/getCurSignUser',
		 type: 'GET',
		 async: false,
		 data: {},
		 dataType: 'json',
		 success: function(jsonData) {
			 if (jsonData.success == true) {
				 if (jsonData.data && jsonData.data[0]) {
					 $("#userId").val(jsonData.data[0].id)
					 $(".p_realName").text(jsonData.data[0].userName == null ? "" :jsonData.data[0].userName);
					 $(".p_phone").text(jsonData.data[0].phoneNumber);
					 $(".div_phone").hide();
					 $(".div_vcode").hide();
					 $(".div_signOut").show(); 
				 } else {
					 $(".div_signOut").hide();
					 $(".div_phone").show();
					 $(".div_vcode").show();
				 }
			 } else {
				 alert(jsonData.msg)
			 }

		 },
		 error: common.ajaxError
		 
	 });
	 
	 $("#signout").click(function() {
		 $.ajax({
			 url: common.ctx + '/sign/signout',
			 type: 'GET',
			 async: false,
			 data: {},
			 dataType: 'json',
			 success: function(jsonData) {
				 if (jsonData.success == true) {
					 window.location.href= common.ctx + "/html/loginResume.html";
				 }
			 },
			 error:common.ajaxError
		 });
	 });
	
	 $(".span_sgin").click(function() {

		 var phone = null;
		 if($(".div_phone").is(":visible")) {
			 if (validatePhoneNumber($("#phone").val())) {
				 phone = $("#phone").val();
			 } else {
				 $(".overlay").hide();
				 $(".delay").hide();
	             alert('联系方式格式有误！');
	             $("#phone").focus();
	             return;
			 }
		 } else {
			 phone = $(".p_phone").text();
		 }
		 
		 if($(".div_vcode").is(":visible")) {
			 if ($("#vcode").val() == "") {
				 alert('请输入验证码');
				 $("#vcode").focus();
	             return;
			 } else if (!validateVcode()) {
				 alert('验证码不正确');
				 $("#vcode").focus();
	             return;
			 }
		 }
		 
		 if (phone != null) {
			 
			 $(".overlay").css({"display":"block"});
			 $(".delay").css({"display":"block"});
			 
			 $.ajax({
			        url: common.ctx + "/app/loginByPhone",
			        type: 'GET',
			        async: false,
			        data:{"phoneNumber" : phone}, 
			        dataType: 'json',
			        success: function(jsonData) {				        	
			        	if(jsonData.success == true) {	
			        	   window.location.href= common.ctx + "/html/resume.html";
			        	} else {
						   $(".overlay").hide();
						   $(".delay").hide();
						   alert(jsonData.msg);
						   $("#phone").focus();
			        	}
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						 if (common.debug == "on") {
							 alert(XMLHttpRequest.status);
				         	 alert(XMLHttpRequest.readyState);
				        	 alert(textStatus);
						 }
				 	}
				});
			
		 }
		 
	 });
	 
});

$(".span_vcode").click(function() {
	 if (click_able == true) {
		 
		 if (validatePhoneNumber($("#phone").val())) {
			 phone = $("#phone").val();
		 } else {
            alert('联系方式格式有误！');
            $("#phone").focus();
            return;
		 }

		 wait=60;
		 click_able = false;
		 time($(this)); 
		 sendVcode();
	 }
});

function validateVcode() {
	 
	 var ajaxResult = false;
	 
	 $.ajax({
		 url: common.ctx + '/sign/validateVcode',
		 type: 'GET',
		 async: false,
		 data: {"vcode" : $("#vcode").val(), "phoneNumber": $("#phone").val() },
		 dataType: 'json',
		 success: function(jsonData) {
			 if(jsonData.success == true) {
				 ajaxResult = true;
			 } else {
				 ajaxResult = false;
			 }
			 return false;
		 },
		 error: common.ajaxError
	 });
	 
	 if (!ajaxResult) {
		 return false;
	 }
	 
	 return true; 
};

function sendVcode() {
	 	 
	 $.ajax({
		 url: common.ctx + '/sign/sendVcode',
		 type: 'GET',
		 async: false,
		 data: {"phone" : $("#phone").val()},
		 dataType: 'json',
		 success: function(jsonData) {

		 },
		 error: common.ajaxError
	 });
};

var wait=60;
var click_able = true;
function time(o) {
    if (wait == 0) {  
        o.text("获取验证码");
        click_able = true;
    } else {
        o.text("重新发送(" + wait + ")");
        wait--;
        setTimeout(function() {
            time(o)
        },
        1000)
    }
};
	 
function validatePhoneNumber( val ) {
	var reg = /^(\d{3,4})-(\d{7,8})/; //验证电话号码
    var regph=/[1][3-9][0-9]{9,9}/; //验证手机号码      
    var re=val.match(reg);
    var reph=val.match(regph);
    if ((re==null&&reph==null)||val.length>11) {
    	return false;
    }
    return true;
}	
</script>


<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span><h1>loading</h1></div></body></html>